<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>ToDoList — 千锋教育版权所有</title>
		<link rel="stylesheet" href="./assets/css/style.css" />
	</head>
	<body>
		<header>
			<section>
				<form>
					<label for="title">
						<img src="https://storage.lynnn.cn/assets/markdown/91147/pictures/2021/04/619cd39e955cea7c6718d38afd084162002a1dab.jpeg?sign=f3720165756a2ba0971a4298d71e755e&t=6077acca" />
					</label>
					<input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
				</form>
			</section>
		</header>
		<section>
			<h2>正在进行 <span id="todocount">3</span></h2>
			<ol id="todolist" class="demo-box">
				<li>
					<input type="checkbox" />
					<p class="editText">吃饭</p>
					<a href="javascript:void(0)" class="removeBtn">-</a>
				</li>
				<li>
					<input type="checkbox" />
					<p class="editText">睡觉</p>
					<a href="javascript:void(0)" class="removeBtn">-</a>
				</li>
				<li>
					<input type="checkbox" />
					<p class="editText">打豆豆</p>
					<a href="javascript:void(0)" class="removeBtn">-</a>
				</li>
			</ol>
			<h2>已经完成 <span id="donecount">2</span></h2>
			<ul id="donelist">
				<li>
					<input type="checkbox" checked="checked" />
					<p class="editText" onclick="edit(4)">喝酒</p>
					<a href="javascript:void(0)" class="removeBtn">-</a>
				</li>
				<li>
					<input type="checkbox" checked="checked" />
					<p class="editText" onclick="edit(5)">蹦迪</p>
					<a href="javascript:void(0)" class="removeBtn">-</a>
				</li>
			</ul>
		</section>
		<footer>
			<p>
				Copyright &copy; 2021 千锋教育 版权所有
				<a href="javascript:;">京ICP备15058198号</a>
			</p>
			<p class="foot-ip">
                <!-- 您当前的ip地址是：<strong id="ipv4">106.38.62.154</strong
                >，地理位置：<strong id="addr">北京市 电信互联网数据交换中心</strong> -->
            </p>
		</footer>
		<script type="text/javascript" src="./assets/js/index.js"></script>
		<script type="text/javascript" src="./assets/js/jquery-3.5.1.min.js"></script>
		<script src="../code/assets/js/myAjax.js"></script>
	</body>
	<script>
		$(function() {

			/**
			 * 新建 Item 项
			 * */
			$('#title').bind('keypress', function(event) {
				if (event.keyCode == "13") {
					var title = $('#title').val().trim();
					var item = buildItem(title,false);
					$("#title").val("")
					refreshCount();
					return false;
				}
			});

			/**
			 * 删除 Item 项
			 * */
			$("body").on("click", ".removeBtn", function() {
				$(this).parent().remove();
				refreshCount();
			})
			
			/**
			 * 修改 Item 项
			 * */
			$("body").on("click", ".edit", function(){
				var text = $(this).text();
			})

			/**
			 * 切换 Item 项
			 * */
			$("body").on("click", "input[type='checkbox']", function() {
				var flag = $(this).is(':checked');
				var title = $(this).parent().children('p').text();
				$(this).parent().remove();
				buildItem(title,flag);
				refreshCount();
			})

			/**
			 * 构建 Item 项
			 * */
			function buildItem(title,flag) {
				var html =`<li>`;
				if(flag) html += `<input type="checkbox" checked />`
				else html += `<input type="checkbox" />`
				html += `<p onclick="edit(1)">` + title +`</p><a href="javascript:void(0)" class="removeBtn">-</a></li>`
				if(flag) $("#donelist").append(html)
				else $("#todolist").append(html)
			}

			/**
			 * 刷新数量
			 * */
			function refreshCount() {
				var todocount = $("#todolist").children("li").length
				var donecount = $("#donelist").children("li").length
				$("#todocount").html(todocount);
				$("#donecount").html(donecount);
			}

		});

		const oP = document.querySelector('.foot-ip');
            myAjax('https://api.i-lynn.cn/ip','get','query&ormat=json',res=>{
                res = JSON.parse(res);
                console.log(res);
                oP.innerHTML = `您当前的ip地址是：<strong id="ipv4">${res.ip}</strong
                >，地理位置：<strong id="addr">${res.country}</strong>`;
            })
	</script>
</html>
